<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <title>音频小动效</title>
    <style>
      .app {
        width: 100%;
        height: 100vh;
        background-color: #ffffff;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .audio-box {
        width: 300px;
        height: 32px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
      }
      .audio-block {
        width: 20px;
        box-sizing: border-box;
        background-color: #97e138;
        border-radius: 3px 3px 0 0;
        animation: audio73-eff 2s linear infinite;
        box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #97e138;
      }
      .audio-block:nth-of-type(2) {
        background-color: #ff3a85;
        animation-delay: 0.3s;
        animation-duration: 2.4s;
        box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #ff3a85;
      }
      .audio-block:nth-of-type(3) {
        background-color: #a2daf6;
        animation-delay: 0.38s;
        box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #a2daf6;
      }
      .audio-block:nth-of-type(4) {
        background-color: #ffd6d0;
        animation-delay: 0.5s;
        box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #ffd6d0;
      }
      .audio-block:nth-of-type(5) {
        background-color: #ff472c;
        animation-duration: 2.7s;
        box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #ff472c;
      }
      .audio-block:nth-of-type(6) {
        background-color: #de74ce;
        animation-delay: 0.6s;
        animation-duration: 1.4s;
        box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #de74ce;
      }
      .audio-block:nth-of-type(7) {
        background-color: #36afca;
        animation-delay: 0.8s;
        box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #36afca;
      }
      @keyframes audio73-eff {
        0% {
          height: 0;
        }
        50% {
          height: 120px;
        }
        100% {
          height: 0;
        }
      }
    </style>
  </head>
  <body>
    <div class="app">
      <div class="audio-box">
        <div class="audio-block"></div>
        <div class="audio-block"></div>
        <div class="audio-block"></div>
        <div class="audio-block"></div>
        <div class="audio-block"></div>
        <div class="audio-block"></div>
        <div class="audio-block"></div>
      </div>
    </div>
  </body>
</html>
